<template>
	<view class="setStatus-page">
		<scroll-view class="scrollY" scroll-y>
			<view v-for="(item, index) in statusList" :key="index" class="block">
				<view class="title">{{item.title}}</view>
				<view class="items">
					<view class="item" v-for="(data, i) in item.data" :key="i" @click="clickStatus(data)">
						<view class="bg"></view>
						<image :src="data.icon" class="icon" />
						<view class="status">{{data.title}}</view>
					</view>
				</view>
			</view>
			<view class="bottom"></view>
		</scroll-view>

		<tui-bottom-popup backgroundColor="#32353A" :zIndex="1002" :maskZIndex="1001" mask maskOpcity="0.2"
			:show="popupShow" @close="popupShow = false">
			<view class="edit-content">
				<view class="nav">
					状态词
					<tui-icon name="shut" color="#fff" size="20" unit="px" class="close" @click="popupShow = false" />
				</view>
				<view class="input-content">
					<image :src="currStatus.icon" class="icon" />
					<tui-textarea v-model="editTitle" placeholder="请输入你自己的状态" color="#fff" backgroundColor="transparent"
						isCounter :maxlength="50" height="80px" minHeight="80px" class="input"></tui-textarea>
				</view>
				<view class="btn">
					<tui-button blackGreyDisabled width="175px" height="45px" :disabled="!editTitle" @click="submit"
						class="t">确定
					</tui-button>
				</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupShow: false,
				editTitle: "",
				currStatus: {},
				statusList: [{
						title: "热门状态",
						data: [{
								title: "冲冲冲",
								icon: require("@/static/status/冲冲冲.png")
							},
							{
								title: "摸鱼",
								icon: require("@/static/status/摸鱼.png")
							},
						]
					},
					{
						title: "心情想法",
						data: [{
								title: "开心",
								icon: require("@/static/status/开心.png")
							},
							{
								title: "发呆",
								icon: require("@/static/status/发呆.png")
							},
							{
								title: "无语",
								icon: require("@/static/status/无语.png")
							},
							{
								title: "邪恶",
								icon: require("@/static/status/邪恶.png")
							},
							{
								title: "头秃",
								icon: require("@/static/status/头秃.png")
							}
						]
					},
					{
						title: "工作学习",
						data: [{
								title: "搬砖",
								icon: require("@/static/status/搬砖.png")
							},
							{
								title: "学习",
								icon: require("@/static/status/学习.png")
							},
							{
								title: "出差旅行",
								icon: require("@/static/status/出差旅行.png")
							}
						]
					},
					{
						title: "活动",
						data: [{
								title: "干饭",
								icon: require("@/static/status/干饭.png")
							},
							{
								title: "奶茶",
								icon: require("@/static/status/奶茶.png")
							},
							{
								title: "咖啡",
								icon: require("@/static/status/咖啡.png")
							},
							{
								title: "运动",
								icon: require("@/static/status/运动.png")
							},
							{
								title: "睡觉",
								icon: require("@/static/status/睡觉.png")
							},
							{
								title: "音乐",
								icon: require("@/static/status/音乐.png")
							},
							{
								title: "电影",
								icon: require("@/static/status/电影.png")
							}
						]
					},
					{
						title: "更多",
						data: [{
							title: "自定义",
							icon: require("@/static/status/自定义.png")
						}]
					}
				]
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#415778"
			})
		},
		methods: {
			clickStatus(v) {
				this.currStatus = v;
				this.editTitle = v.title;
				this.popupShow = true;
			},
			submit() {
				let v = this.currStatus;
				v.title = this.editTitle;
				uni.$emit('addStatus', v);
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './setStatus.scss';
</style>
